<template>
	<span id="span">
		<span v-if="GroupStatus != 'loading'"  v-for="(item, index) in node_status_options" :key="index" v-show="item.dictValue == machineState">
				<span :style="'color:'+ item.extendVal ">{{ item.dictLabel }}</span>
		</span>
		<span v-if="GroupStatus == 'loading'">加载中...</span>
		<span v-else-if="!machineState || machineState == 0"
			style="color: #f56c6c">故障
		</span>
	</span>
</template>

<script>
	import { mapGetters } from "vuex";
	
	export default {
		computed: {
			...mapGetters(["node_status_options","GroupStatus"]),
		},	
		props: {
			nodeIp: String,
		},
		watch: {
			"GroupStatus"(newVal, oldVal) {
			
				if(JSON.stringify(newVal) == '{}'){
					this.machineState = '';
				}else {
					var arr = [];
					for ( let item in newVal) {
						arr.push(item);
					}
					
					if (arr[0] == this.nodeIp) {
						this.machineState = newVal[this.nodeIp].machineState;
					}else if (arr[1] == this.nodeIp) {
						this.machineState = newVal[this.nodeIp].machineState;
					}else{
						this.machineState = '';
					}
				}
			}
		},
		data() {
			return {
				machineState:'',
			};
		}
	}
</script>

<style>

</style>
